/**
* @作者:晋尧
* @创建时间：2021/7/16
* @修改时间：2021/7/21
*/

<template>
	<view class="main" v-if="showPage">
		<!-- 头部导航栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 160rpx; height: 90rpx;" fit="cover" class="logo" @click="jumpToMain">
			<view class="navitems">
				<el-badge :value="12" class="navitem" hidden>
					<view @click="jumptoLogIn">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut">退出登录</view>
			</view>
		</view>
		<!-- 表单内容 -->
		<view>
			<el-form ref="form" :model="form" label-width="80px" class="form">
				<el-form-item label="标题/名称" class="formItemsHeight">
					<el-input v-model="form.name" class="name_input" placeholder="请输入商品名称,不超过15字" maxlength=30>
					</el-input>
				</el-form-item>
				<el-form-item label="描述" class="formItemsHeight">
					<el-input v-model="form.description" class="name_input" placeholder="请输入商品描述,不超过50字" maxlength=100>
					</el-input>
				</el-form-item>
				<el-form-item label="展示图">
					<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"
						:on-change="storeImg1" :file-list="imgSrc1">
						<i slot="default" class="el-icon-plus"></i>
						<view slot="file" slot-scope="{file}">
							<el-image style="width: 150px; height: 150px" :src="file.url"></el-image>
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
									<i class="el-icon-zoom-in"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete"
									@click="handleDownload(file)">
									<i class="el-icon-download"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
									<i class="el-icon-delete"></i>
								</span>
							</span>
						</view>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>

				</el-form-item>
				<el-form-item label="类别/品牌" class="formItemsHeight">
					<el-cascader v-model="form.value" :options="options" @change="brandHandleChange" disabled>
					</el-cascader>
				</el-form-item>
				<el-form-item label="配置">
					<el-card class="goodsSettings" shadow="never">
						<el-table :data="goodsSettings">
							<el-table-column label="配置">
								<template slot-scope="scope">
									<div class="goodsSettingsDiv">
										<el-input v-model="scope.row.setting" placeholder="请输入配置">
										</el-input>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="库存">
								<template slot-scope="scope">
									<div class="goodsSettingsDiv">
										<el-input v-model="scope.row.left" placeholder="请输入库存余量">
										</el-input>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="日租">
								<template slot-scope="scope">
									<div class="goodsSettingsDiv">
										<el-input v-model="scope.row.price" placeholder="请输入日租价格">
										</el-input>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="押金">
								<template slot-scope="scope">
									<div class="goodsSettingsDiv">
										<el-input v-model="scope.row.deposit" placeholder="请输入押金">
										</el-input>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="136px">
								<template slot-scope="scope">
									<el-button type="success" size="mini" icon="el-icon-circle-plus-outline"
										v-if="scope.row.show === 'true'" plain @click="pushNewSetting(scope.$index)">
									</el-button>
									<el-button type="danger" size="mini" icon="el-icon-delete" plain
										@click="deleteSetting(scope.$index)">
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-form-item>
				<el-form-item label="简介图">
					<el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="storeImg2"
						:file-list="imgSrc2">
						<i slot="default" class="el-icon-plus"></i>
						<div slot="file" slot-scope="{file}">
							<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
									<i class="el-icon-zoom-in"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete"
									@click="handleDownload(file)">
									<i class="el-icon-download"></i>
								</span>
								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove2(file)">
									<i class="el-icon-delete"></i>
								</span>
							</span>
						</div>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>
				<!-- 页面功能按钮 -->
				<el-form-item>
					<el-button type="primary" @click="submitWindow" class="show_button">提交修改</el-button>
					<el-button @click="cancelSubmit" class="show_button">取消修改</el-button>
				</el-form-item>
			</el-form>
		</view>
	</view>
</template>

<script>
	export default {
		// 页面加载方法
		onLoad: function() {
			if(!this.$cookies.isKey("shopId")){
				this.$alert('您还未登录，请先登录！', '错误', {
					confirmButtonText: '确定',
				});
				uni.redirectTo({
					url: "ShopLoginIndex"
				})
			}
			this.openFullScreen()
			this.getData()
		},

		methods: {
			// 跳转到主界面
			jumpToMain(){
				uni.redirectTo({
					url:"MyGoods"
				})
			},
			
			// 退出登录
			openLogOutWindow() {
				this.$confirm('确定要退出登录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$cookies.remove("shopName")
					this.$cookies.remove("shopId")
					// location.reload()
			
					uni.navigateTo({
						url: "ShopLoginIndex"
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出登录'
					});
				});
			},
			// 退出登陆方法
			logOut() {
				this.openLogOutWindow()
			},
			
			//获取商品原始信息
			async getData() {
				var that = this;
				await this.$axios({
					methods: 'get',

					url: '/SKU/getOne?Id=' + this.$cookies.get("modifyGoodsId")

				}).then(res => {
					that.arr = res.data.date;
				}).catch(err => {
					
				})

				this.goodsSettings.splice(0, 1, {
					price: that.arr.skuSpecificationOptions[0].price,
					left: that.arr.skuSpecificationOptions[0].stock,
					deposit: that.arr.skuSpecificationOptions[0].deposit,
					setting: that.arr.skuSpecificationOptions[0].value,
					id: that.arr.skuSpecificationOptions[0].id,
					skuId: that.arr.skuSpecificationOptions[0].skuId,
				})
				for (var i = 1; i < that.arr.skuSpecificationOptions.length; i++) {
					this.goodsSettings.push({
						price: that.arr.skuSpecificationOptions[i].price,
						left: that.arr.skuSpecificationOptions[i].stock,
						deposit: that.arr.skuSpecificationOptions[i].deposit,
						setting: that.arr.skuSpecificationOptions[i].value,
						id: that.arr.skuSpecificationOptions[i].id,
						skuId: that.arr.skuSpecificationOptions[0].skuId,
					})
				}

				this.goodsSettings[that.arr.skuSpecificationOptions.length - 1].show = 'true'
				this.form.name = that.arr.name;
				this.form.description = that.arr.subTitle;

				this.imgSrc1.splice(0, 1, {
					name: that.arr.skuImages[0].id,
					url: "http://47.96.168.135:7388" + that.arr.skuImages[0].url,
				})
				for (var i = 1; i < that.arr.skuImages.length; i++) {
					this.imgSrc1.push({
						name: that.arr.skuImages[i].id,
						url: "http://47.96.168.135:7388" + that.arr.skuImages[i].url,
					})
				}

				this.imgSrc2.splice(0, 1, {
					name: that.arr.skuSpecificationImages[0].id,
					url: "http://47.96.168.135:7388" + that.arr.skuSpecificationImages[0].url,
				})
				for (var i = 1; i < that.arr.skuSpecificationImages.length; i++) {
					this.imgSrc2.push({
						name: that.arr.skuSpecificationImages[i].id,
						url: "http://47.96.168.135:7388" + that.arr.skuSpecificationImages[i].url,
					})
				}
				this.originImgLength1 = this.imgSrc1.length
				this.originImgLength2 = this.imgSrc2.length
				this.originOptionLength = this.goodsSettings.length
				this.filelist1 = that.arr.skuImages
				this.filelist2 = that.arr.skuSpecificationImages
			},
			//商品图片存储
			storeImg1(file) {
				this.filelist1.push(file)
			},
			//简介图片存储
			storeImg2(file) {
				this.filelist2.push(file)
			},
			//商品图片删除
			handleRemove1(file) {
				var list = document.querySelectorAll("li");
				var that = this;
				for (var i = 0; i < list.length; i++) {
					((i) => {
						list[i].onclick = function() {
							list[i].remove();
						}
					})(i);
				}
				this.imgSrc1.map((item, index) => {
					if (item.uid == file.uid) {
						this.filelist1.splice(index, 1)
						this.originImgLength1--
					}

				})
			},
			//商品简介图片删除
			handleRemove2(file) {
				var list = document.querySelectorAll("li");
				var that = this
				for (var i = 0; i < list.length; i++) {
					((i) => {
						list[i].onclick = function() {
							list[i].remove();
						}
					})(i);

				}
				this.imgSrc2.map((item, index) => {
					if (item.uid == file.uid) {
						this.filelist2.splice(index, 1)
						this.originImgLength2--
					}

				})
			},

			// 图片预览
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			// 图片下载
			handleDownload(file) {
				window.open(file.url)
			},
			// 品牌选择
			brandHandleChange(value) {
				console.log(value);
			},
			// 新增配置
			pushNewSetting(index) {
				var list = this.goodsSettings;
				list[index].show = 'false';
				list.push({
					//配置id
					id: '',
					//配置
					setting: '',
					//库存
					left: '',
					//日租
					price: '',
					//押金
					deposit: '',
					// 是否显示新增按钮
					show: 'true',
				});
				this.goodsSettings = list;
			},
			// 删除配置
			deleteSetting(index) {
				var list = this.goodsSettings;
				if (this.goodsSettings[index].id != '') {
					this.originOptionLength--
				}

				if (index === 0 && list.length === 1) {
					list.splice(index, 1);
					list.push({
						//配置id
						id: '',
						//配置
						setting: '',
						//库存
						left: '',
						//日租
						price: '',
						//押金
						deposit: '',
						//是否显示新增按钮
						show: 'true',
					});
				} else {
					list.splice(index, 1);
				}
				if (index === list.length) {
					list[index - 1].show = 'true';
				}
				this.goodsSettings = list;
			},

			//转换商品配置方法
			goodsSettingsTransform() {
				if (this.originOptionLength != 0) {
					this.transformedSettings.splice(0, 1, {
						price: this.goodsSettings[0].price,
						stock: this.goodsSettings[0].left,
						deposit: this.goodsSettings[0].deposit,
						value: this.goodsSettings[0].setting,
						id: this.goodsSettings[0].id,
						skuId: this.goodsSettings[0].skuId,
					})
					for (var i = 1; i < this.goodsSettings.length; i++) {
						this.transformedSettings.push({
							price: this.goodsSettings[i].price,
							stock: this.goodsSettings[i].left,
							deposit: this.goodsSettings[i].deposit,
							value: this.goodsSettings[i].setting,
							id: this.goodsSettings[i].id,
							skuId: this.goodsSettings[i].skuId,
						})
					}
				}
				if (this.originOptionLength < this.goodsSettings.length) {
					this.transformedSettings.splice(this.originOptionLength, 1, {
						id: '',
						deposit: this.goodsSettings[this.originOptionLength].deposit,
						price: this.goodsSettings[this.originOptionLength].price,
						stock: this.goodsSettings[this.originOptionLength].left,
						value: this.goodsSettings[this.originOptionLength].setting,
					})
				}
				for (var i = this.originOptionLength + 1; i < this.goodsSettings.length; i++) {
					this.transformedSettings.push({
						id: '',
						deposit: this.goodsSettings[i].deposit,
						price: this.goodsSettings[i].price,
						stock: this.goodsSettings[i].left,
						value: this.goodsSettings[i].setting,
					})
				}
			},


			// 取消修改按钮
			cancelSubmit() {
				this.$confirm('确定要放弃修改吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					location.reload()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消修改'
					});
				});
			},

			//获取value长度方法
			getValueLength() {
				this.form.valueLength = this.form.value.length - 1;
			},
			//图片逐项提交方法
			imgFor() {
				for (var i = this.originImgLength1; i < this.filelist1.length; i++) {
					uni.uploadFile({
						url: "http://47.96.168.135:7388/Business/PostImage",
						filePath: this.filelist1[i].url,
						name: "image",
						formData: {
							skuId: parseInt(this.$cookies.get("skuId")),
							flag: 1
						},
						success: (res) => {
						},
					})
				}
				for (var j = this.originImgLength2; j < this.filelist2.length; j++) {
					uni.uploadFile({
						url: "http://47.96.168.135:7388/Business/PostImage",
						filePath: this.filelist2[j].url,
						name: "image",
						formData: {
							skuId: parseInt(this.$cookies.get("skuId")),
							flag: 2
						},
						success: (res) => {
							
						},
					})
				}
			},
			//提交弹窗
			submitWindow() {
				if (this.form.name == '' || this.form.description == '' || this.goodsSettings[0].deposit == '' ||
					this.filelist1.length == 0 || this.filelist2.length == 0) {
					this.$alert('请填写所有选项！', '提交失败', {
						confirmButtonText: '确定',
					});
				} else {
					this.$confirm('确定要提交修改吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.submit()
						this.$alert('提交成功！', '提示', {
							confirmButtonText: '确定',
						});
						uni.navigateTo({
							url: "Mygoods"
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消提交'
						});
					});
				}
			},

			//提交修改方法
			async submit() {
				var that = this;
				this.goodsSettingsTransform();
				this.getValueLength();
				await this.$axios({
					method: "post",
					url: "/Business/modifySKU",
					data: {
						name: this.form.name,
						id: this.$cookies.get("modifyGoodsId"),
						subTitle: this.form.description,
						storeName: this.$cookies.get("shopName"),
						skuSpecificationOptions: this.transformedSettings,
						specificationName: "配置",
						state: "待审核",
						skuImages: this.filelist1.slice(0, this.originImgLength1),
						skuSpecificationImages: this.filelist2.slice(0, this.originImgLength2),
					}
				}).then((res) => {
					this.$cookies.set("skuId", res.data.date, "5s")
				})

				this.imgFor()


			},
			//加载中显示
			openFullScreen() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 1)'
				});
				setTimeout(() => {
					loading.close();
					this.showPage = true
				}, 800);

			}
		},
		data() {
			return {
				tabPosition: 'left',
				showPage: false,
				filelist1: [],
				filelist2: [],
				form: {
					name: '',
					description: '',
					value: [],
					valueLength: 3,
				},
				goodsId: 1,
				brandname: '',
				businessname: '',
				imgSrc1: [{
					name: '',
					url: '',
				}],
				imgSrc2: [{
					name: '',
					url: '',
				}],
				options: [{
					value: '数码',
					label: '数码',
					children: [{
						value: '手机',
						label: '手机',
						children: [{
							value: '华为',
							label: '华为',
							children: [{
									value: '华为P40 pro',
									label: '华为P40 pro',
								},
								{
									value: '华为Mate30',
									label: '华为Mate30',
								}
							]
						}, {
							value: '小米',
							label: '小米',
							children: [{
									value: '小米11Ultra',
									label: '小米11Ultra',
								},
								{
									value: '小米11',
									label: '小米11',
								}
							]
						}, {
							value: '一加',
							label: '一加',
							children: [{
									value: '一加9',
									label: '一加9',
								},
								{
									value: '一加8T',
									label: '一加8T',
								}
							]
						}, {
							value: 'OPPO',
							label: 'OPPO'
						}],

					}, {
						value: '平板电脑',
						label: '平板电脑',
						children: [{
							value: '苹果',
							label: '苹果'
						}, {
							value: '三星',
							label: '三星'
						}]
					}]
				}, {
					value: '书籍',
					label: '书籍',
					children: [{
						value: '传记',
						label: '传记',
						children: [{
							value: '中国传记',
							label: '中国传记'
						}, {
							value: '美国传记',
							label: '美国传记'
						}]
					}, {
						value: '小说',
						label: '小说',
						children: [{
							value: '中国小说',
							label: '中国小说'
						}, {
							value: '美国小说',
							label: '美国小说'
						}]
					}]
				}, {
					value: '家具',
					label: '家具',
					children: [{
						value: '沙发',
						label: '沙发'
					}, {
						value: '桌子',
						label: '桌子'
					}]
				}],

				originImgLength1: 0,
				originImgLength2: 0,
				originOptionLength: 0,
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				goodsSettings: [{
					//配置id
					id: '',
					//配置
					setting: '',
					//库存
					left: '',
					//日租
					price: '',
					//押金
					deposit: '',
					// 是否显示新增按钮
					show: 'true',
				}],
				transformedSettings: [{
					//配置id
					id: '',
					//配置
					value: '',
					//库存
					stock: '',
					//日租
					price: '',
					//押金
					deposit: '',
				}],
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	.header {
		width: 100%;
		height: 90rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}
	
	.logo {
		margin-left: 5%;
	}
	
	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}
	
	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.tabs {
		height: 1000px;
	}

	.form {
		margin-left: 10%;
		margin-top: 50px;
	}

	.formItemsHeight {
		height: 50px;
	}

	.name_input {
		width: 300px;
	}


	.goodsSettings {
		.goodsSettingsDiv {
			width: 100%;
			overflow: hidden;
			.el-input__inner {
				border: none;
			}
		}

		width: 70%;
	}

	.show_button {
		width: 200px;
	}
</style>
